import React, { useEffect, useState } from 'react';
import { Link } from 'umi';
import { Menu, ConfigProvider } from 'antd';

import styles from './index.less';

import { menuData } from '@/routes/menu';
import Header from '@/components/Header/index';
import zhCN from 'antd/lib/locale/zh_CN';

const { SubMenu, Item } = Menu;

const layouts: React.FC = (props: any) => {
  const [selectKeys, setSelectKeys] = useState([props.location.pathname]);
  const [defaultOpenKeys, setDefaultOpenKeys] = useState(
    props.location.pathname.split('/'),
  );

  const getMenuList_map = (menuList: any) => {
    return menuList.map((item: any) => {
      if (!item.children) {
        return (
          <Item key={item.path}>
            <Link to={item.path}>
              <img src={item.icon} className={styles.icon}></img>
              <span>{item.title}</span>
            </Link>
          </Item>
        );
      } else {
        return (
          <SubMenu
            key={item.path}
            title={
              <span>
                <img src={item.icon} className={styles.icon}></img>
                <span>{item.title}</span>
              </span>
            }
          >
            {getMenuList_map(item.children)}
          </SubMenu>
        );
      }
    });
  };
  useEffect(() => {
    setSelectKeys([props.location.pathname]);
  }, [props.location.pathname]);

  return (
    <ConfigProvider locale={zhCN}>
      <div className={styles.page}>
        <Header></Header>
        <div className={styles.wrapper}>
          <div className={styles.sides}>
            <Menu
              defaultOpenKeys={defaultOpenKeys}
              selectedKeys={selectKeys}
              mode="inline"
              theme="dark"
            >
              {getMenuList_map(menuData)}
            </Menu>
          </div>
          <div className={styles.content}>{props.children}</div>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default layouts;
